import React, { Component } from "react";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import Nav from "@/src/components/nav/Nav"; // 多端组件  import 的是不带端类型的文件名，在编译的时候会自动识别并添加端类型后缀
import Banner from "@/src/components/banner/Banner";
import ListItem from "@/src/components/lists-item/ListItem";
import "./index.scss";

export default class Index extends Component {
  // eslint-disable-next-line react/sort-comp
  state = {
    lists: [],
  };
  constructor(props) {
    super(props);
  }
  // 页面挂载时
  componentWillMount() {
     Taro.setNavigationBarTitle({
       title: '设置标题',
     });
  }
  // 虚拟dom生成后
  componentDidMount() {
    // 获取数据
    Taro.request({
      url: "http://jsonplaceholder.typicode.com/posts",
      header: {
        "content-type": "application/json",
      },
      success: (res) => {
        this.setState({ lists: res.data });
      },
    });
  }

  componentWillUnmount() {}

  // 相当于小程序的onShow
  componentDidShow() {}

  // 相当于小程序的onHide
  componentDidHide() {}

  // 接收子组件传值
  detail(id) {
    Taro.navigateTo({
      url: `/pages/pages-index/detail/detail?id=${id}`,
    });
    // // Taro.redirectTo({
    // //   url: `/pages/pages-index/detail/detail?id=${id}`
    // // })
    // Taro.switchTab();
  }
  render() {
    return (
      <View className='index'>
        <Nav />
        <Banner />
        {process.env.TARO_ENV === "h5" && <View>商品信息(只在h5中显示)</View>}
        <ListItem lists={this.state.lists} goDetail={this.detail} />
      </View>
    );
  }
}
